<template>
  <el-config-provider :locale="zhCn">
    <header-view :projName="projName" @menu-select="onMenuSelect">
      <template #main-content>
        <router-view></router-view>
      </template>
    </header-view>
  </el-config-provider>
</template>

<script setup>
import { useProjectStore } from '$store/project'
import { useMenuStore } from '$store/menu'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import $curl from '$common/curl'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import headerView from './complex-view/header-view/header-view.vue'

const router = useRouter()
const route = useRoute()
const menuStore = useMenuStore()
const projectStore = useProjectStore()
const projName = ref('')

async function getProjectList() {
  const res = await $curl({
    url: '/api/project/list',
    method: 'GET',
    query: {
        proj_key: route.query.proj_key
    },
  })
  if (!res || !res.success || !res.data) {
    return
  }
  projectStore.setProjectList(res.data)
}

async function getMenuConfig() {
  const res = await $curl({
    url: '/api/project',
    method: 'GET',
    query: {
        proj_key: route.query.proj_key
    },
  })
  if (!res || !res.success || !res.data) {
    return
  }

  const { name, menu } = res.data
  projName.value = name
  menuStore.setMenuList(menu)
}

// 点击菜单回调方法
const onMenuSelect = function(menuItem) {
    const { moduleType, key, customConfig } = menuItem;

    // 如果是当前页面，不处理
    if (key === route.query.key) { return; }

    const pathMap = {
        sider: '/sider',
        iframe: '/iframe',
        schema: '/schema',
        custom: customConfig?.path
    };

    router.push({
        path: '/view/dashboard' + pathMap[moduleType],
        query: {
            key,
            proj_key: route.query.proj_key
        }
    });
};
onMounted(() => {
  getProjectList()
  getMenuConfig()
})

</script>
<style scoped lang="less"></style>
